<template>
  <page-header-wrapper :title="false">
    <a-card title="订单详情">
<!--      <template slot="extra">-->
<!--        <a-button size="small" type="danger" icon="edit">订单状态</a-button>-->
<!--      </template>-->
      <a-descriptions bordered>
        <a-descriptions-item label="关键字/词">
          {{purchaseDetail.tm_name}}
        </a-descriptions-item>
        <a-descriptions-item label="商标类别">
          <div v-for="(item, index) in categoryOpts" :key="index">
            <div v-if="purchaseDetail.category == index">{{item}}</div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="类似群组">
          {{purchaseDetail.groups}}
        </a-descriptions-item>
        <a-descriptions-item label="国家">
          <div v-for="(item, index) in regionOpts" :key="index">
            <div v-if="purchaseDetail.region == index">{{item}}</div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="提交顾问">
          {{purchaseDetail.username}}
        </a-descriptions-item>
        <a-descriptions-item label="提交时间">
          {{purchaseDetail.created_at}}
        </a-descriptions-item>
        <a-descriptions-item label="采购数量">
          {{purchaseDetail.purchase_num}}
        </a-descriptions-item>
        <a-descriptions-item label="期望成本">
          {{purchaseDetail.hope_cost_start}} ~ {{purchaseDetail.hope_cost_end}}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { getPurchaseView } from '@/api/tm.shop'

export default {
  name: 'OrderDetail',
  data () {
    return {
      purchaseDetail: {},
      categoryOpts: {},
      regionOpts: {}
    }
  },
  activated () {
    this.getDetail(this.$route.params.id)
  },
  methods: {
    getDetail (id) {
      const app = this
      getPurchaseView(id).then(res => {
        if (res.status === 0) {
          app.purchaseDetail = res.result.purchase
          app.categoryOpts = res.result.category_opts
          app.regionOpts = res.result.region_opts
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
